<template>
    <div class="home">
      
      <h1>最新文章</h1>
       <!-- 新增的置顶项目经历 -->
       <el-col :xs="24" :sm="24" :md="24" v-if="topArticle">
        <el-card class="article-card top-article">
          <template #header>
            <div class="card-header">
              {{ topArticle.title }}
            </div>
          </template>
          <div class="article-content">
            {{ topArticle.summary }}
          </div>
          <div class="article-meta">
            <el-icon><Calendar /></el-icon>
            {{ topArticle.date }}
          </div>
        </el-card>
      </el-col>
      <el-row :gutter="20">
        <el-col 
          v-for="article in articles"
          :key="article.id"
          :xs="24" :sm="12" :md="8"
        >
          <el-card class="article-card">
            <template #header>
              <div class="card-header">
                <router-link :to="`/article/${article.id}`">
                  {{ article.title }}
                </router-link>
              </div>
            </template>
            <div class="article-content">
              {{ article.summary }}
            </div>
            <div class="article-meta">
              <el-icon><Calendar /></el-icon>
              {{ article.date }}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  import instance from '@/utils/request'; // 导入请求工具
  
  // 定义文章列表
  const articles = ref([]);
  
// 新增的置顶项目数据（写死内容）
const topArticle = ref({
  title: 'www.bigpigbig.cn域名',
  // summary: '1. 在线教育平台开发（Vue3 + Spring Cloud）\n' +
  //          '   - 负责前端课程管理模块开发\n' +
  //          '   - 实现微服务架构下的单点登录功能\n\n' +
  //          '2. 电商中台系统（React + Node.js）\n' +
  //          '   - 主导商品管理模块重构\n' +
  //          '   - 优化商品详情页加载速度30%\n\n' +
  //          '3. 物联网数据可视化平台（Vue + ECharts）\n' +
  //          '   - 开发实时数据监控模块\n' +
  //          '   - 实现大数据量下的流畅渲染',
  summary:'http:134.175.177.137',
  date: '持续更新中'
});
  // 获取文章列表的函数
  const fetchArticles = async () => {
    try {
      const response = await axios.get('https://www.bigpigbig.cn/stage-api/myblog/articles/list?pageNum=1&pageSize=1000')
      articles.value = response.data.rows; // 假设后端返回的数据格式为 { code: 0, rows: [...] }
    } catch (error) {
      console.error('获取文章列表失败:', error);
    }
  };
  
  // 在组件挂载时调用获取文章列表的函数
  onMounted(() => {
    fetchArticles();
  });
  </script>
  <style lang="scss" scoped>
  .article-card {
    margin-bottom: 20px;
    
    .card-header {
      font-size: 1.2em;
      font-weight: bold;
    }
    
    .article-content {
      color: #666;
      height: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .article-meta {
      margin-top: 10px;
      color: #999;
      font-size: 0.9em;
      
      .el-icon {
        vertical-align: middle;
        margin-right: 5px;
      }
    }
  }
  </style>